Review: Use low-fidelity designs to start project mockups 複習：用低保真設計開啟 Mockup 階段

以下是你在將低保真設計轉換為 mockup 和高保真原型時，在 Figma 中使用頁面（Pages）與畫框（Frames）的重點總結與建議：

頁面（Pages）

• 每個頁面都有獨立的畫布（Canvas），適合分別放置不同階段的設計資產，比如低保真線框（Wireframes）和高保真 mockup。

• 示例：一個頁面叫“Wireframes”，另一個叫“Mockups”，方便你快速切換和管理不同階段的設計。

• 頁面可以幫助你聚焦在一個設計階段，避免混亂。

畫框（Frames）

• 畫框是具體承載設計內容的“容器”，每個畫框可以代表一個螢幕，例如首頁、下單頁、確認頁等。

• 將畫框編號是一個好習慣，比如 1、2、3……代表使用者互動流程的順序。

• 所有畫框都會在左側導航欄中顯示，便於快速定位，不用在大畫布中滾動尋找。

實用建議

• 將一個專案組織為兩個頁面：一個放 wireframes，一個放 mockups；畫框內各自放入相應的介面設計。

• 給畫框明確命名並按順序排列，有助於日後連線為高保真原型。

結論

良好的頁面與畫框結構，可以讓你的檔案清晰、易於修改和展示，也更專業，適合放入 UX 作品集中。

需要我幫你列一個 Figma 檔案結構的標準模板或者練習步驟嗎？